<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Div Overlap Example</title>  
    <style>  
        .base-div {  
            position: relative;  
            width: 300px;  
            height: 300px;  
            background-color: lightblue;  
        }  
  
        .floating-div {  
            position: absolute;  
            top: 50px;  
            left: 50px;  
            width: 100px;  
            height: 100px;  
            background-color: lightcoral;  
            z-index: 2; /* 更高的z-index意味着更高的堆叠顺序 */  
        }  
    </style>  
</head>  
<body>  
    <div class="base-div">  
        Base Div  
        <div class="floating-div">Floating Div</div>  
    </div>  
</body>  
</html>



波浪动画的CSS定义  
@keyframes wave-animation {  
    0%,100%{  
        clip-path: polygon(0% 56%, 7% 61%, 15% 67%, 24% 69%, 36% 66%, 45% 60%, 53% 54%, 61% 50%, 68% 47%, 78% 47%, 86% 52%, 93% 57%, 100% 64%, 100% 99%, 0% 99%);/* 波浪起始位置 */  
    }  
    50% {  
        clip-path: polygon(0% 56%, 9% 49%, 24% 48%, 36% 53%, 49% 61%, 61% 67%, 74% 64%, 90% 61%, 100% 62%, 100% 99%, 0% 99%); /* 波浪下浮的幅度 */  
    }  
    
}